<template>
	<view class="">
		<view class="wrap">
			<u-swiper :list="swiperList" height="150" indicator indicatorMode="dot" circular></u-swiper>
			<u-notice-bar class="notice-list" direction="column" bgColor="#fff" color="#333" fontSize="12"
				:text="noticeList" @click="toNotice"></u-notice-bar>
			<view class="image-acive"v-if="activityInfo">
				<image class="panic" @click="qiang"
					:src="activityInfo ? $IMG_URL+activityInfo.image : '/static/index/panic.png'" mode=""></image>
				<view v-show="activityInfo.countdown == true" class="active-tiem">距离活动开始还有：{{countDown}}</view>
			</view>
			<goodsList :list="goodList" :isJifen="1" :detailType="3"></goodsList>
		</view>
	</view>
</template>

<script>
	import goodsList from '@/components/goods-list.vue'
	export default {
		components: {
			goodsList
		},
		data() {
			return {
				countDown: '', // 假设倒计时10秒
				swiperList: [], //轮播图
				noticeList: [], //公告列表
				goodList: [], //商品列表
				activityInfo: '', //获取首页活动
				userInfo: {}
			};
		},
		onShow() {
			this.getAdsList(); //获取轮播图
			this.getGoodsList(); //获取推荐商品列表
		},
		// 下拉刷新
		onPullDownRefresh() {
			 this.getAdsList(); //获取轮播图
			 this.getGoodsList(); //获取推荐商品列表
		},
		methods: {
			// 获取推荐商品列表
			getGoodsList(){
				this.$http('index.getGoodsListByRecommend', {}, '获取中...').then(res => {
					if (res.code == 1) {
						this.goodList = res.data.data
					}
				})
			},
			// 跳转
			navigator(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 抢购按钮 判断时间戳
			qiang() {
				if (!this.activityInfo.enter) {
					uni.showToast({
						icon: 'none',
						title: '抢购活动时间还未开始,请耐心等待'
					})
					return
				}
				this.navigator('/pages/index/panicCenter/panicCenter?activityId=' + this.activityInfo.id)
			},
			// 获取分钟时间戳
			minutesToTimestamp(minutes) {
				return minutes * 60 * 1000 + new Date('1970-01-01T00:00:00Z').getTime();
			},
			toNotice(e) {
				this.navigator('/pages/index/noticeDetail/noticeDetail?id=' + this.noticeList[e].id)
			},
			getAdsList() {
				uni.stopPullDownRefresh(); //停止刷新
				//用户信息
				this.$http('user.getuserdetails', {}, '获取中...').then(res => {
					if (res.code == 1) {
						// console.log(res, 11)
						res.data.mobile = res.data.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, `$1****$2`)
						this.userInfo = res.data
					}
				})
				// 获取轮播图 
				this.$http('index.getAdsList', {}, '获取中...').then(res => {
					if (res.code == 1) {
						this.swiperList = res.data
					}
				})
				// 公告
				this.$http('index.getNoticeList', {}, '获取中...').then(res => {
					if (res.code == 1) {
						this.noticeList = res.data
					}
				})
				
				// 获取首页活动
				this.$http('index.getActivityList', {}, '获取中...').then(res => {
					if (res.code == 1) {
						this.activityInfo = res.data
						// 假设服务器返回的时间戳（单位：秒）
						this.getLiveTimeCount(res.data.start_time)
					}
				})
			},
			getLiveTimeCount(end_time) {
				if (end_time) { //如果设置了开始时间
					this.liveCountTimes = setInterval(() => {
						let nowTime = new Date().getTime();
						let preTime = new Date(end_time * 1000).getTime()
						let obj = null;
						if (preTime - nowTime > 0) {
							let time = (preTime - nowTime) / 1000;
							let day = parseInt(time / (60 * 60 * 24));
							let hou = parseInt(time % (60 * 60 * 24) / 3600);
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							obj = {
								day: day < 10 ? '0' + day : day,
								hou: hou < 10 ? '0' + hou : hou,
								min: min < 10 ? '0' + min : min,
								sec: sec < 10 ? '0' + sec : sec
							};
							// obj.day + '天' +
							this.countDown = obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
						} else {
							obj = {
								day: '00',
								hou: '00',
								min: '00',
								sec: '00'
							};
							this.countDown = obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
							clearInterval(this.liveCountTimes)
						}
					}, 1000)
				} else {
					this.countDown = "开始时间待定"
				}
			}
		}
	};
</script>

<style lang="scss">
	.wrap {
		background-color: #F6F7F9;
		padding: 20rpx;

		.notice-list {
			margin-top: 20rpx;
		}
	}

	.image-acive {
		width: 720rpx;
		height: 240rpx;
		margin: 20rpx 0;
		position: relative;
		.panic {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.active-tiem {
			width: 400rpx;
			// text-align: center;
			margin-top: 75rpx;
			margin-left: 85rpx;
			position: absolute;
			font-size: 16rpx;
			color: rgb(255, 237, 191);
			top: 133rpx;
			left: 50%;
			transform: translate(-50%);
		}
	}
</style>